<template>
	<view class="activity-list-page">
		<view class="page-header">
			<text class="page-title">我的活动记录</text>
		</view>
		<scroll-view class="list-container" scroll-y>
			<view v-if="activities.length === 0" class="empty-tip">
				<text>暂无参与记录</text>
			</view>
			<view v-for="(activity, index) in activities" :key="activity.id" class="activity-item">
				<!-- 使用与个人中心相同的活动项模板 -->
				<view class="activity-info">
					<text class="activity-name">{{ activity.name }}</text>
					<text class="activity-time">{{ formatTime(activity.time) }}</text>
					<text class="activity-points">{{ activity.points > 0 ? '+' : '' }}{{ activity.points }}积分</text>
				</view>
				<view class="activity-status" :class="getStatusClass(activity.status)">
					{{ getStatusText(activity.status) }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getStudentActivitiesApi
	} from '../../http/my'

	const userId = ref(null)
	const studentName = ref('')
	const activities = ref([])

	// 从URL参数获取用户ID
	onLoad((options) => {
		if (options.studentName) {
		    studentName.value = decodeURIComponent(options.studentName)
		    fetchActivitiesData()
		} else {
			uni.showToast({
				title: '用户名缺失',
				icon: 'none'
			})
			uni.navigateBack()
		}
	})

	// 复用与个人中心相同的格式化函数
	const formatTime = (timeStr) => {
		return timeStr.replace(' ', ' · ')
	}

	const getStatusText = (status) => {
		const statusMap = {
			completed: '已完成',
			pending: '待审核',
			canceled: '已取消'
		}
		return statusMap[status] || status
	}

	const getStatusClass = (status) => {
		return `status-${status}`
	}

	// 获取活动数据
	const fetchActivitiesData = async () => {
		try {
			const res = await getStudentActivitiesApi(studentName.value, 1000, 1)

			if (res && res.records) {
				// 使用与个人中心相同的数据转换逻辑
				activities.value = res.records.map(record => {
					const statusMap = {
						0: 'canceled',
						1: 'pending',
						2: 'completed',
						3: 'pending'
					}

					const formatISOTime = (isoString) => {
						const date = new Date(isoString)
						return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
					}

					return {
						id: record.id,
						name: record.activityName,
						time: formatISOTime(record.activityTime),
						points: record.point,
						status: statusMap[record.status] || 'pending'
					}
				})
			} else {
				console.error('获取活动数据失败:', res)
				activities.value = []
				uni.showToast({
					title: '获取活动数据失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('请求活动接口出错:', error)
			uni.showToast({
				title: '请求活动数据失败',
				icon: 'none'
			})
			activities.value = []
		}
	}
</script>

<style scoped>
	.activity-list-page {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.page-header {
		padding: 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.list-container {
		margin-top: 10px;
	}

	/* 复用个人中心的活动项样式 */
	.activity-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.activity-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.activity-name {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.activity-time {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.activity-points {
		font-size: 24rpx;
		color: #4facfe;
	}

	.activity-status {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
	}

	.status-completed {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.status-pending {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	.status-canceled {
		background-color: #fff1f0;
		color: #f5222d;
	}

	.empty-tip {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 28rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
	}
</style>